<template>
    <div>
       <yh-dialog drag
            title="确认重新生成吗? 确认之后以下内容将会被覆盖!"
            :visible.sync="visibleTemp"
            width="700px"
            @close="closeModal"
            :close-on-click-modal="false"
        >
            <div style="min-height: 200px">
                <template v-for="(item, key) in list">
                    <div v-if="item.show" :key="key">
                        <p class="title">【{{ fieldNames[key] }}】</p>
                        <p class="ltite" v-show="item.add.length">新增</p>
                        <ul v-if="item.add.length" class="list">
                            <li v-for="field in item.add" :key="'add' + field.key">
                                <span style="color: #008000">{{ field.key }}: {{ field.newValue }}</span>
                            </li>
                        </ul>
                        <p class="ltite" v-show="item.edit.length">修改</p>
                        <ul v-if="item.edit.length" class="list">
                            <li v-for="field in item.edit" :key="'edit' + field.key">
                                <span style="color: #008000">{{ field.key }}: </span>
                                <span style="color: #ff3737">
                                    {{ field.oldValue }}
                                    <span style="color: #000">-></span>
                                    {{ field.newValue }}
                                </span>
                            </li>
                        </ul>
                        <p class="ltite" v-show="item.del.length">删除</p>
                        <ul v-if="item.del.length" class="list">
                            <li v-for="field in item.del" :key="'del' + field.key">
                                <span style="color: #008000">{{ field.key }}: </span>
                                <span style="color: red">{{ field.oldValue }}</span>
                            </li>
                        </ul>
                    </div>
                </template>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeModal">取 消</el-button>
                <el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
            </div>
       </yh-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, PropSync, Vue, Watch } from 'vue-property-decorator';

@Component({ name: 'CalculateFactorInfoDiff' })
export default class CalculateFactorInfoDiff extends Vue {
    @PropSync('visible') syncVisible: boolean;
    @Prop({ required: true }) diffColumnNames: any;

    private visibleTemp = false;
    private fieldNames = {
        ersqlColumnNames: '日初字段说明',
        insqlColumnNames: '日中字段说明',
        stsqlColumnNames: '静态字段说明',
        ensqlColumnNames: '委托字段说明',
    };

    @Watch('diffColumnNames', { deep: true, immediate: true })
    onWatchDiffColumnNames(value) {
        let columnNames = JSON.parse(JSON.stringify(value));
        for (const columnName in columnNames) {
            const columnList = columnNames[columnName];
            let add = [];
            let edit = [];
            let del = [];
            let show = !!columnNames[columnName].length;
            for (const columnListElement of columnList) {
                if (columnListElement.type === 'add') {
                    add.push(columnListElement);
                } else if (columnListElement.type === 'edit') {
                    edit.push(columnListElement);
                } else if (columnListElement.type === 'del') {
                    del.push(columnListElement);
                }
            }
            this.list[columnName].show = show;
            this.list[columnName].add = add;
            this.list[columnName].edit = edit;
            this.list[columnName].del = del;
        }
    }

    private list = {
        ersqlColumnNames: {
            show: false,
            add: [],
            edit: [],
            del: [],
        },
        insqlColumnNames: {
            show: false,
            add: [],
            edit: [],
            del: [],
        },
        stsqlColumnNames: {
            show: false,
            add: [],
            edit: [],
            del: [],
        },
        ensqlColumnNames: {
            show: false,
            add: [],
            edit: [],
            del: [],
        },
    };

    @Watch('visible')
    onWatchVisible(value) {
        if (value !== this.visibleTemp) {
            this.visibleTemp = value;
        }
    }

    // 关闭弹窗
    closeModal() {
        this.syncVisible = false;
    }

    onSubmit() {
        this.$emit('on-submit');
        this.closeModal();
    }
}
</script>

<style lang="scss" scoped>
.title {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    margin-top: 10px;
}
.ltite {
    font-size: 14px;
    color: #000;
    padding-left: 20px;
}
.list {
    font-size: 14px;
    padding-left: 30px;
}
</style>
